<template>
<div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 表单 -->
       <el-form ref="form" :model="form" label-width="80px" >
         <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input ref="inp"  size="small" v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="float: right">
              <el-button size="small" @click="restInput">清除</el-button>
              <el-button  type="primary" size="small" @click="randoms">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- alert -->
        <el-alert
          style="margin-bottom: 10px"
          show-icon
          :closable="false"
          :title="'数据一共' + page.total +'条'"
          type="info">
        </el-alert>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            width="190"
            prop="id"
            label="编号">
          </el-table-column>
          <el-table-column
            :formatter="formatQuestionType"
            prop="questionType"
            label="题型">
          </el-table-column>
          <el-table-column
            min-width="180"
            prop="questionIDs"
            label="题目编号">
          <template v-slot="{row: {questionIDs} }">
            <el-link :underline="false" type="primary" v-for="i in questionIDs" :key="i.number" @click="getId(i.id)">{{i.number}}</el-link>
            <!-- <a href="javascript" v-for="i in questionIDs" :key="i.number" class="url-a" >{{i.number}}</a> -->
          </template>
          </el-table-column>
          <el-table-column
            width="180"
            prop="addTime"
            label="录入时间">
          </el-table-column>
          <el-table-column
            prop="totalSeconds"
            label="答题时间(S)">
          </el-table-column>
          <el-table-column
            prop="accuracyRate"
            label="正确率(%)">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="录入人">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template v-slot="{row}">
              <el-button @click="removeRandoms(row)" size="small" type="danger" icon="el-icon-delete" plain circle></el-button>
            </template>
          </el-table-column>
        </el-table>

       </el-form>
        <el-row type="flex" class="row-bg" justify="end" style="margin-top: 12px">
          <el-pagination
            background
            @size-change="randoms"
            @current-change="handleCurrentChange"
            :current-page="page.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="page.size"
            layout="total, prev, pager, next, sizes, jumper"
            :total="page.total">
          </el-pagination>
        </el-row>

      </el-card>
    </div>
    <Preview :dialogVisible.sync="dialogVisible" :data="data" @colse="previewClose" v-if="data.id !== null"/>
    <!-- @colse="previewClose" v-if="data.id !== null" -->
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import { questionType } from '@/api/hmmm/constants.js' // 引入枚举数组
import Preview from './components/preview.vue'

export default {
  components: {
    Preview
  },
  data () {
    return {
      questionType, // 在data中定义
      form: {
        name: ''
      },
      tableData: [],
      page: { // 定义分页数据
        page: 1, // 当前页面为第几页
        size: 20,
        total: null
      },
      dialogVisible: false,
      data: {
        id: null
      }

    }
  },
  created () {
    this.randoms()
  },
  methods: {
    // 获取数据
    async randoms (val) {
      this.page.size = typeof (val) === 'number' ? val : 10 // 改变当前页显示多少条

      const { data: { items, counts } } = await randoms({ page: this.page.page, pagesize: this.page.size, keyword: this.form.name })
      this.tableData = items // 对象型数组
      this.page.total = counts
    },
    // 格式化
    formatQuestionType (row, column, cellValue, index) {
      const obj = this.questionType.find(item => (item.value + '') === (cellValue + ''))
      return obj ? obj.label : ''
    },
    // 分页器跳转第几页
    handleCurrentChange (val) {
      this.page.page = val
      this.randoms()
    },
    // 点击删除
    async removeRandoms (id) {
      try {
        await this.$confirm('您确定删除这条数据吗')
        await removeRandoms(id)
        this.$message.success('删除数据成功')
        // 解决分页器删除最后一条问题
        if (this.tableData.length === 1 && this.page.page > 1) {
          this.page.page--
        }
        this.randoms()
      } catch (error) {
        console.log(error)
      }
    },
    // 传递id
    getId (id) {
      this.data.id = id
      this.dialogVisible = true
    },
    // 弹窗关闭事件
    previewClose () {
      this.data.id = null
    },

    // 清除input
    restInput () {
      this.form.name = ''
      this.randoms()
    }

  }

}
</script>

<style scoped>
.url-a {
  display: block;
  color: rgb(0, 153, 255);
}

</style>
